<template>
    <view>
        <view class="close" @click="close" :style="`top:${top}px`">×</view>
        <video class="video" @ended="close" :src="video" autoplay />
    </view>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
defineProps(['video'])
const top = ref(0)
const emits = defineEmits(['close'])
const close = () => {
    emits('close')
}

const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
top.value = menuButtonInfo.top
</script>
<style scoped>
.video {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    z-index: 10000;
}

.close {
    position: fixed;
    top: 10rpx;
    left: 20rpx;
    color: white;
    font-size: 46rpx;
    z-index: 10001;
}
</style>
